<template>
  <div class="restrictRecord">
    <div class="medical-form-container">
      <div class="form-row">
        <div class="form-item">
          <span>名称：</span>
          <el-select v-model="form.name" placeholder="请选择..." class="medical-input">
            <el-option v-for="item in nameOptions" :key="item" :label="item" :value="item" />
          </el-select>
        </div>

        <div class="form-item">
          <span>总量：</span>
          <el-input v-model="form.total" placeholder="请输入总量" class="medical-input" />
        </div>

        <div class="form-item">
          <span>总量单位：</span>
          <el-select v-model="form.unit" class="medical-input">
            <el-option v-for="item in unitOptions" :key="item" :label="item" :value="item" />
          </el-select>
        </div>

        <div class="form-item">
          <span>血袋号：</span>
          <el-input v-model="form.bagNumber" placeholder="请输入..." class="medical-input" />
        </div>
        <div class="form-item">
          <span>血型：</span>
          <el-select v-model="form.bloodType" class="medical-input">
            <el-option v-for="item in bloodTypeOptions" :key="item" :label="item" :value="item" />
          </el-select>
        </div>

        <div class="form-item">
          <span>RH：</span>
          <el-select v-model="form.rh" class="medical-input">
            <el-option v-for="item in rhOptions" :key="item" :label="item" :value="item" />
          </el-select>
        </div>
      </div>

      <div class="form-row">
        <div class="form-item">
          <span>通路评估：</span>
          <el-select v-model="form.accessAssessment" placeholder="请选择..." class="medical-input">
            <el-option v-for="item in assessmentOptions" :key="item" :label="item" :value="item" />
          </el-select>
        </div>

        <div class="form-item">
          <span>审核者：</span>
          <el-input v-model="form.reviewer" class="medical-input" />
        </div>

        <div class="form-item">
          <span>记录时间：</span>
          <el-date-picker
            v-model="form.recordTime"
            type="datetime"
            placeholder="选择日期时间"
            class="medical-input"
          />
        </div>

        <div class="form-item radio-group">
          <span>输血史：</span>
          <el-radio-group v-model="form.transfusionHistory">
            <el-radio :label="true">有</el-radio>
            <el-radio :label="false">无</el-radio>
          </el-radio-group>
        </div>

        <div class="form-item radio-group">
          <span id="speSpan">输血不良反应：</span>
          <el-radio-group v-model="form.adverseReaction">
            <el-radio :label="true">有</el-radio>
            <el-radio :label="false">无</el-radio>
          </el-radio-group>
        </div>
      </div>
    </div>

    <div class="topFilterBox">
      <div class="date-quick">
        <i class="picker-before el-icon-arrow-left" @click="prevDate"></i>
        <DatePicker
          v-model="recordTime"
          select-interval
          class="top-datepicker"
          value-format="timestamp"
          :clearable="false"
          @input="handleDate"
        />
        <i class="picker-after el-icon-arrow-right" @click="nextDate"></i>
      </div>

      <div class="buttonScheduling">
        <el-button-group>
          <el-button
            v-for="item in scheduleList"
            :key="item.id"
            class="shift-tab"
            :class="{
              'shift-tab-active': scheduleSet && scheduleSet.id === item.id,
            }"
            @click="setCurSchedule(item.id)"
          >
            {{ item.label }}
          </el-button>
        </el-button-group>
      </div>
    </div>

    <div class="toothBox">
      <div>
        <el-button type="primary" size="mini" @click="handleAdd"
          >+
          <span style="margin-left: 4px">添加时间点</span>
        </el-button>
        <!-- <el-button
        style="color: #165dff; border-color: #165dff"
        @click="openObsvConfig()"
        >+自定义项目</el-button
      > -->
        <div class="mainContainer">
          <div class="record">
            <div class="table_content_box">
              <div class="table_content">
                <div class="table_heard">
                  <div class="row">
                    <div class="cell flex-2">时间</div>
                    <div class="cell">滴速(滴/分)</div>
                    <div class="cell">体温(℃)</div>
                    <div class="cell">心率(次/分)</div>
                    <div class="cell">呼吸(次/分)</div>
                    <div class="cell">血氧饱和度(%)</div>
                    <div class="cell">血压(mmHg)</div>
                    <div class="cell">不良反应</div>
                    <div class="cell">输血反应</div>

                    <div class="cell">备注</div>
                    <div class="cell">操作</div>
                  </div>
                </div>
                <div class="table_body">
                  <div v-if="tableDataList.length > 0">
                    <div v-for="(item, index) in tableDataList" :key="index" class="row">
                      <!-- 时间 === start -->
                      <div class="cell flex-2 cell-date">
                        <!-- <el-date-picker
                          v-model="item.recordTime"
                          type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          :clearable="false"
                          placeholder="选择日期时间"
                        >
                        </el-date-picker> -->
                        <DateSelection
                          v-model="item.recordTime"
                          value-format="yyyy-MM-dd HH:mm"
                          :date-show="true"
                          :no-clear="true"
                        />
                      </div>
                      <!-- 时间 === end -->
                      <!-- PH酸碱度 === start -->
                      <div class="cell">
                        <input
                          v-model="item.ph"
                          :title="item.ph"
                          class="inputBox txt-c"
                          placeholder="请输入"
                        />
                      </div>
                      <!-- 体温 === end -->
                      <!-- 体温=== start -->
                      <div class="cell">
                        <input
                          v-model="item.ph"
                          :title="item.ph"
                          class="inputBox txt-c"
                          placeholder="请输入"
                        />
                      </div>
                      <!--  体温 === end -->

                      <!-- 心率=== start -->
                      <div class="cell">
                        <input
                          v-model="item.ph"
                          :title="item.ph"
                          class="inputBox txt-c"
                          placeholder="请输入"
                        />
                      </div>
                      <!--  心率 === end -->
                      <!-- 呼吸=== start -->
                      <div class="cell">
                        <input
                          v-model="item.ph"
                          :title="item.ph"
                          class="inputBox txt-c"
                          placeholder="请输入"
                        />
                      </div>
                      <!--  呼吸 === end -->
                      <!-- 血氧饱和度=== start -->
                      <div class="cell">
                        <input
                          v-model="item.ph"
                          :title="item.ph"
                          class="inputBox txt-c"
                          placeholder="请输入"
                        />
                      </div>
                      <!--  血氧饱和度 === end -->
                      <!-- 血压=== start -->
                      <div class="cell">
                        <input
                          v-model="item.ph"
                          :title="item.ph"
                          class="inputBox txt-c"
                          placeholder="请输入"
                        />
                      </div>
                      <!--  血压 === end -->

                      <!-- 不良反应=== start -->
                      <div class="cell cell-select">
                        <el-select
                          v-model="item.dentures"
                          allow-create
                          default-first-option
                          placeholder="请选择"
                        >
                          <el-option
                            v-for="pdict in badList"
                            :key="pdict.key"
                            :label="pdict.label"
                            :value="pdict.value"
                            >{{ pdict.label }}
                          </el-option>
                        </el-select>
                      </div>
                      <!-- 不良反应 === end -->

                      <!-- 输血反应=== start -->
                      <div class="cell cell-select">
                        <el-select
                          v-model="item.dentures"
                          allow-create
                          default-first-option
                          placeholder="请选择"
                        >
                          <el-option
                            v-for="pdict in badList"
                            :key="pdict.key"
                            :label="pdict.label"
                            :value="pdict.value"
                            >{{ pdict.label }}
                          </el-option>
                        </el-select>
                      </div>
                      <!-- 输血反应 === end -->
                      <!-- 备注=== start -->
                      <div class="cell">
                        <input
                          v-model="item.ph"
                          :title="item.ph"
                          class="inputBox txt-c"
                          placeholder="请输入"
                        />
                      </div>
                      <!--  备注 === end -->
                      <div class="cell">
                        <el-button class="c-blue" type="text" @click="saveRecord(item)">
                          同步体征
                        </el-button>
                        <!-- <el-popconfirm
                        title="确认删除该条记录?"
                        @confirm="deleteRecord(item)"
                      >
                        <div slot="reference">
                          <el-button
                            slot="reference"
                            class="c-red ml-10"
                            type="text"
                          >
                            删除
                          </el-button>
                        </div>
                      </el-popconfirm> -->
                      </div>
                    </div>
                  </div>
                  <div v-else class="nodata">
                    <div>暂无数据</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="btnBox">
            <el-button
              v-if="tableDataList.length > 0"
              class="my-btn"
              type="success"
              @click="saveAllRecord()"
              >保存新增</el-button
            >
          </div>
        </div>

        <!-- :row-style="
              ({ row, rowIndex }) => ({
                background: rowIndex === 0 ? '#ECFFEE' : ''
              })
            " -->
        <div class="botTab">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column
              v-for="(item, index) in columns"
              :key="index"
              :label="item.label"
              :width="item.width"
              align="center"
            >
              <template #header>
                <!-- <div
                v-if="item.prop === 'restrictTime' "
             
                class="addTimeBtn"
                @click="handleAdd('record')"
              >
                +新增时间
              </div> -->
                <div>{{ item.label }}</div>
              </template>
              <template #default="{ row, $index }">
                <template v-if="item.prop === 'operator'">
                  <el-button type="text" @click="handleEdit($index)">查看</el-button>
                  <el-popconfirm title="确认删除？" @confirm="handleRecordDel($index)">
                    <template v-slot:reference>
                      <el-button type="text" style="color: #f56c6c; margin-left: 20px"
                        >删除</el-button
                      >
                    </template>
                  </el-popconfirm>
                </template>

                <template v-else-if="item.prop === 'restrictTime'">
                  <!-- <div v-if="$index === 0" class="firstTag">首</div>
                  <div v-else-if="$index === 1" class="endTag">末</div> -->
                  {{ $index + 1 }}
                </template>
                <template v-else-if="item.prop === 'restrictRelaxValue'">
                  {{ row[item.prop] }} {{ row['restrictRelaxUnit'] }}
                </template>
                <template v-else>
                  <!-- {{
                    Array.isArray(row[item.prop])
                      ? row[item.prop].join('、')
                      : row[item.prop]
                  }} -->
                  {{ row[item.prop] }}
                </template>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { format } from 'date-fns'
import { defineComponent, reactive, toRefs ,onMounted} from 'vue'

import DateSelection from '@/components/DateSelection/indexV2.vue'
import DatePicker from '@/components/MyComp/DatePicker.vue'
// import {
//   getElementFnFromInstance,
//   getStoreFromInstance
// } from '@/utils/instance'
export default defineComponent({
  name: 'BloodTransfusion',
  components: { DatePicker, DateSelection },
  setup() {
    const state = reactive({
      createTime: "2025-07-21  15:37",
      form: {
        name: '',
        total: '',
        unit: 'ml',
        bagNumber: '',
        bloodType: 'A型',
        rh: '阳性',
        accessAssessment: '',
        reviewer: '',
        recordTime: '',
        transfusionHistory: false,
        adverseReaction: false,
      },
      nameOptions: ['红细胞悬液', '新鲜冰冻血浆', '血小板', '冰冻血浆', '冷沉淀'],
      unitOptions: ['ml', 'u'],
      bloodTypeOptions: ['A型', 'B型', 'O型', 'AB型'],
      rhOptions: ['阴性', '阳性'],
      assessmentOptions: ['无殊', '欠通畅', '发红', '肿胀', '外渗'],
      recordTime: +new Date(),
      tableDataList: [],
      scheduleList: [
        {
          id: 1,
          key: '今天',
          label: '今天',
          value: '今天',
        },
        {
          id: 2,
          key: '昨天',
          label: '昨天',
          value: '昨天',
        },
        {
          id: 3,
          key: '全部输血记录',
          label: '全部输血记录',
          value: '全部输血记录',
        },
      ],
      badList: [
        {
          key: '有',
          label: '有',
          value: '有',
        },
        {
          key: '无',
          label: '无',
          value: '无',
        },
      ],
      tableData: [
        {
          id: 1,
          restrictPositionName: '名称1',
          time: '2025-07-07',
          recorder: '张三',
          reviewer: '李四',
        },
        { id: 2 },
        { id: 2 },
      ],
      columns: [
        {
          label: '序号',
          prop: 'restrictTime',
          width: '200px',
        },
        {
          label: '记录时间',
          prop: 'time',
        },
        {
          label: '名称',
          prop: 'restrictPositionName',
        },
        {
          label: '记录者',
          prop: 'recorder',
        },
        {
          label: '审核者',
          prop: 'reviewer',
        },
        {
          label: '总量',
          prop: 'restrictPositionName',
        },
        {
          label: '开始时间',
          prop: 'restrictToolName',
        },
        {
          label: '操作',
          prop: 'operator',
        },
      ],
    })
    // const { $message, $confirm } = getElementFnFromInstance()
    // const store = getStoreFromInstance()
    // const patCur = computed(() => store.getters.patCur)
    // function queryRecord() {
    //   const params = {
    //     hospitalNumber: patCur.value.hospitalNumber,
    //     patientIdent: patCur.value.patientIdent,
    //     recordTime: format(state.recordTime, 'yyyy-MM-dd')
    //   }
    //   // Teeth.getList(params).then(res => {

    //   //   state.tableDataList = res.data
    //   // })
    //   state.tableDataList.push(params)
    //   // console.log('999tableDataList',state.tableDataList);
    // }
    // 新增单条记录
    function handleAdd() {
      const params = {
        // hospitalNumber: patCur.value.hospitalNumber,
        // patientIdent: patCur.value.patientIdent,
        recordTime: state.recordTime,
      }
      // Teeth.add(params).then(res => {
      //   queryRecord()
      // })
      state.tableDataList.push(params)
      console.log('哈哈哈tableDataList', state.tableDataList)
    }
    // initData
    function handleDate() {
      //  queryRecord()
    }
    // 上一页
    function prevDate() {
      state.recordTime -= 86400000
      handleDate()
    }
    // 下一页
    function nextDate() {
      state.recordTime += 86400000
      handleDate()
    }

    // watch(
    //   patCur,
    //   val => {
    //     if (val) {
    //       // queryRecord()
    //       // queryTeeth()
    //     }
    //   },
    //   {
    //     immediate: true
    //   }
    // )
 onMounted(() => {
     const isoFormat = state.createTime.replace(/\s+/, 'T')
      // 生成时间戳
      const timestamp = new Date(isoFormat).getTime()
      console.log('timestamp', timestamp)
 
    })

    return {
      ...toRefs(state),
      format,
      handleAdd,
      prevDate,
      nextDate,
      handleDate,
    }
  },
})
</script>
<style scoped lang="scss">
@import './style/index.scss';
//@import './style/tooth.scss';
// @import '../../views/homeNew/styles/variables';
.medical-form-container {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.form-row {
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 12px;
  gap: 16px;
}

.form-item {
  display: flex;
  align-items: center;

  justify-content: flex-start;
  width: 200px;
  span {
    width: 60px;
    font-size: 14px;
    color: #606266;
    white-space: nowrap;
  }
  #speSpan {
    width: 90px;
  }
}

.medical-input {
  width: 132px;

  :deep(.el-input__inner) {
    // height: 36px;
    // line-height: 36px;
  }
}

.radio-group {
  :deep(.el-radio-group) {
    gap: 16px;
  }

  :deep(.el-radio) {
    margin-right: 0;
  }
}

.btnBox {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}

.buttonScheduling {
  display: inline-flex;
  align-items: center;
  vertical-align: bottom;
  margin-left: 12px;

  .shift-tab {
    font-size: 14px;
    // color: $nurseObserve_widget_text_color_default;
    color: #999;
    padding-left: 24px;
    padding-right: 24px;
    // background-color: $nurseObserve_widget_bg_color_default;
    background-color: #fff;

    &-active {
      background-color: #165dff;
      color: #fff;
    }
  }
}

.topFilterBox {
  display: flex;
  // margin-top: 10px;
  flex-wrap: wrap;
  align-items: center;
}

::v-deep {
  .el-table {
    overflow-y: auto;

    &::before {
      display: none;
    }

    .el-table__header-wrapper thead {
      tr {
        th.el-table__cell {
          background-color: #0295c7;
          color: #fffeff;

          .cell {
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>
